import {defineComponent, ref} from "vue";
import style from "@/page/portal/mine/comp/css/collect.module.css";
import {MembersStore} from "@/stores/members";
import {storeToRefs} from "pinia";
import BasicEditor from "@/components/BasicEditor/index.vue";
import {ElMessage} from "element-plus";

export default defineComponent({
    setup() {
        const members_store = MembersStore()
        const {membersInfo} = storeToRefs(members_store)
        const formRef = ref(null)
        const isApply = ref(false)
        const rules = {}
        const changeValue = (name, value) => {
            membersInfo.value[name] = value
        }

        const init = async () => {
            isApply.value = await members_store.isApply()
        }

        const validateForm = async () => {
            if (membersInfo.value.member_content === '<p><br></p>' || membersInfo.value.member_content === undefined) {
                membersInfo.value.member_content = undefined
                ElMessage.warning('请输入申请内容')
            } else {
                const res = await members_store.addMembers()
                if (res) {
                    ElMessage.success('申请成功')
                    init()
                }
            }
        }

        init()

        return () => {
            console.log(membersInfo.value,"membersInfo.value")
            const format = ()=>{
                if(isApply.value){
                    return   <div className={style.content}>
                        <div className={style.content_title}>
                            <span>会员正在申请中,请耐心等待审核</span>
                        </div>
                    </div>
                }else if( membersInfo.value.status === 2){
                    return   <div className={style.content}>
                        <div className={style.content_title}>
                            <span>您已经是会员了</span>
                        </div>
                    </div>
                }else{
                    return <>
                    <el-form
                    model={membersInfo.value}
                    ref={formRef}
                    rules={rules}>
                    <el-form-item prop={'describe'}>
                        <div style={{padding: "20px"}}>
                            <BasicEditor valueContent={membersInfo.value.member_content}
                                         changeName={'member_content'} changeValue={changeValue}></BasicEditor>
                            <el-button
                                style={{marginTop: "20px"}}
                                type="primary"
                                onClick={validateForm}>确认申请
                            </el-button>
                        </div>
                    </el-form-item>
                    </el-form>
                    </>
                }
            }
            return <>
                <div className={style.collect_box}>
                    <div className={style.title}>会员申请</div>
                    {
                       format()
                    }
                </div>
            </>
        }
    }
})